import React, { Component } from 'react'

import propTypes from 'prop-types'

export default class Father extends Component {
  constructor() {
    super()
    this.state = {
      count: 1
    }
  }
  render() {
    let arr = [1,3,4,5,6]
    return (
      <div>
        <ChildrenFn name='xjh' age={123} height={1.88} arr={arr}></ChildrenFn>
        <Children name='xjh' age='123' height='1.88'></Children>
        <h1>count: {this.state.count}</h1>
        <CountBtn onClick={e => {this.increment()}}></CountBtn>
      </div>
    )
  }
  increment = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
}

class Children extends Component {
  // static 就是给我的类加上一些属性..这样
  static propTypes = {

  }

  static defaultProps = {

  }

  render() {
    const {height, age, name} = this.props
    return (
      <div>
        <h2>{ height+ age + name}</h2>
      </div>    
    )
  }
}

// 这样的类型限制方案,让我有点不好意思了...
ChildrenFn.propTypes = {
  name: propTypes.string.isRequired,
  age: propTypes.number,
  height: propTypes.number,
  arr: propTypes.array
}

/* 默认值的设置方式 */
Children.defaultProps = {

}

function ChildrenFn({height, age, name, arr}) {
  console.log(arr)
  return (
    <div>
      <h2>{ height+ age + name}</h2>
      <ul>
        
      </ul>
    </div>    
  )
}

class CountBtn extends Component {
  render() {
    // 简单的通过这样的方式解决这样的问题吗？
    const {onClick} = this.props
    return (
      <div>
        <button onClick={onClick}>+1</button>
      </div>
    )
  }
}